
<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="admui.com">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" type="image/png" href="../../../../../public/images/favicon.png">
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <link rel="icon" sizes="192x192" href="../../../../../public/images/apple-touch-icon.png">
    
    <!-- Win8标题栏及ICON图标 -->
    <meta name="msapplication-TileColor" content="#62a8ea">
    <meta name="msapplication-TileImage" content="../../../../../public/images/app-icon72x72@2x.png">
    <link rel="apple-touch-icon-precomposed" href="../../../../../public/images/apple-touch-icon.png">
    
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'"/>
    <![endif]-->
    
    <title>字体图标 Open Iconic - UI示例 - Admui</title>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../../../../public/themes/global/css/bootstrap.css">
    
    <!-- 字体图标 CSS -->
    <link rel="stylesheet" href="../../../../../public/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../../../../../public/fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="../../../../../public/fonts/open-iconic/open-iconic.css">
    
    <!-- Site CSS -->
    <link rel="stylesheet" href="../../../../../public/themes/base/css/site.css" id="admui-siteStyle">
    
    <!-- 插件 CSS -->
    <link rel="stylesheet" href="../../../../../public/vendor/animsition/animsition.css">
    <link rel="stylesheet" href="../../../../../public/vendor/toastr/toastr.css">
    <link rel="stylesheet" href="../../../../../public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="../../../../../public/vendor/bootstrap-slider/bootstrap-slider.css">
    
    <!-- Page CSS -->
    <link rel="stylesheet" href="../../../../../public/css/examples/components/basic/icon.css">
    
    <!-- 插件 -->
    <script src="../../../../../public/vendor/jquery/jquery.min.js"></script>
    <script src="../../../../../public/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="../../../../../public/vendor/lodash/lodash.min.js"></script>
    <script src="../../../../../public/vendor/breakpoints/breakpoints.min.js"></script>
    
    <!--[if lt IE 10]>
    <script src="../../../../../public/vendor/media-match/media.match.min.js"></script>
    <script src="../../../../../public/vendor/respond/respond.min.js"></script>
    <![endif]-->
    
    <!-- 核心 -->
    <script src="../../../../../public/themes/global/js/core.js"></script>
    <script src="../../../../../public/themes/global/js/configs/site-configs.js"></script>
    <script src="../../../../../public/themes/global/js/components.js"></script>
    <script src="../../../../../public/themes/base/js/site.js"></script>
    
    <script>
        'use strict';
        Breakpoints();
    </script></head>
<body class="site-menubar-unfold " data-theme="base">

<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" id="admui-siteNavbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler hamburger hamburger-close navbar-toggler-left hided" data-toggle="menubar">
            <span class="sr-only">切换菜单</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggler collapsed" data-target="#admui-navbarCollapse" data-toggle="collapse">
            <i class="icon wb-more-horizontal" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo d-sm-block d-lg-block d-none navbar-logo" src="../../../../../public/images/logo-white.svg"
                title="Admui">
            <img class="navbar-brand-logo d-sm-none navbar-logo-mini" src="../../../../../public/images/logo-white-min.svg" title="Admui">
        </div>
    </div>

    <div class="navbar-container container-fluid">
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="admui-navbarCollapse">
            <ul class="nav navbar-toolbar navbar-left">
                <li class="nav-item hidden-float" id="toggleMenubar">
                    <a class="nav-link" data-toggle="menubar" href="javascript:;" role="button" id="admui-toggleMenubar">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">切换目录</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="navbar-menu nav-tabs-horizontal nav-tabs-animate is-load" id="admui-navMenu">
                    <ul class="nav navbar-toolbar nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#admui-navTabsItem-2" aria-controls="admui-navTabsItem-2"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-library"></i>
                                <span>UI 示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-3" aria-controls="admui-navTabsItem-3"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-desktop"></i>
                                <span>页面示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-4" aria-controls="admui-navTabsItem-4"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-table"></i>
                                <span>表格示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-5" aria-controls="admui-navTabsItem-5"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-order"></i>
                                <span>表单示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-6" aria-controls="admui-navTabsItem-6"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-pie-chart"></i>
                                <span>统计图表</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-7" aria-controls="admui-navTabsItem-7"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-menu"></i>
                                <span>菜单示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-8" aria-controls="admui-navTabsItem-8"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-settings"></i>
                                <span>系统管理</span>
                            </a>
                        </li>
                        <li class="nav-item dropdown" id="admui-navbarSubMenu">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                data-animation="slide-bottom">
                                更多
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item no-menu" href="/html/site-map.html">
                                    <i class="icon wb-list-numbered"></i>
                                    <span>网站地图</span>
                                </a>
                                <a class="dropdown-item no-menu" href="/html/system/menu.html">
                                    <i class="icon wb-wrench"></i>
                                    <span>菜单管理</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="nav-item dropdown" id="admui-navbarUser">
                    <a class="nav-link navbar-avatar" data-toggle="dropdown" href="javascript:;" aria-expanded="false"
                        data-animation="scale-up" role="button">
                        <span class="avatar avatar-online">
                            <img src="../../../../../public/images/avatar.svg" alt="...">
                            <i></i>
                        </span>
                    </a>
                    <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="/html/system/account.html?tab=display" role="menuitem">
                            <i class="icon wb-layout" aria-hidden="true"></i>
                            <span>显示设置</span>
                        </a>
                        <a class="dropdown-item" href="/html/system/account.html?tab=password" role="menuitem">
                            <i class="icon wb-pencil" aria-hidden="true"></i>
                            <span>修改密码</span>
                        </a>
                        <a class="dropdown-item" href="/html/system/account.html" role="menuitem">
                            <i class="icon wb-settings" aria-hidden="true"></i>
                            <span>账户信息</span>
                        </a>
                        <div class="dropdown-divider" role="presentation"></div>
                        <a class="dropdown-item" href="/html/login.html" role="menuitem">
                            <i class="icon wb-power"></i>
                            <span>退出</span>
                        </a>
                    </div>
                </li>
                <li class="nav-item dropdown" id="admui-navbarMessage">
                    <a class="nav-link msg-btn" data-toggle="dropdown" href="javascript:;" aria-expanded="false"
                        data-animation="scale-up" role="button">
                        <i class="icon wb-bell" aria-hidden="true"></i>
                        <span class="badge badge-danger up msg-num"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>最新消息</h5>
                            <span class="badge badge-round label-danger"></span>
                        </li>
                        <li class="list-group" role="presentation">
                            <div class="navbar-message-content h-250" data-plugin="mCustomScrollbar">
                                <div id="admui-messageContent"></div>
                            </div>
                            <script type="text/html" id="admui-messageTpl">
                                <% if (msgList.length < 1) { %>
                                <p class="text-center h-200 vertical-align">
                                    <small class="vertical-align-middle opacity-four">没有新消息</small>
                                </p>
                                <% } else { %>
                                <% for(var i = 0; i < msgList.length; i++){ %>
                                <% var item = msgList[i]; %>
                                <a class="list-group-item" href="#" data-message-id="<%= item.messageId %>"
                                   data-title="<%= item.title %>"
                                   data-content="<%= item.content %>" role="menuitem">
                                    <div class="media">
                                        <div class="pr-10">
                                            <i class="icon <%= $imports.iconType(item.messageId) %> white icon-circle"
                                               aria-hidden="true"></i>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="media-heading"><%= item.title %></h6>
                                            <time class="media-meta" datetime="<%= item.sendTime %>">
                                                <%= $imports.timeMsg(item.sendTime) %>
                                            </time>
                                        </div>
                                    </div>
                                </a>
                                <% } %>
                                <% } %>
                            </script>
                        </li>
                        <div class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-item" href="/html/system/account.html?tab=message" role="menuitem">
                                <i class="icon fa-navicon"></i>所有消息
                            </a>
                        </div>
                    </ul>
                </li>
                <li class="nav-item d-none d-sm-block" id="admui-navbarDisplay" data-toggle="tooltip" data-placement="bottom"
                    title="设置主题与布局等">
                    <a class="nav-link" href="/html/system/settings/display.html">
                        <i class="icon wb-layout"></i>
                        <span class="sr-only">主题与布局</span>
                    </a>
                </li>
                <li class="nav-item d-none d-sm-block" id="admui-navbarFullscreen" data-toggle="tooltip" data-placement="bottom"
                    title="全屏">
                    <a class="nav-link" href="javascript:;" role="button">
                        <i class="icon icon-fullscreen"></i>
                        <span class="sr-only">全屏</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<nav class="site-menubar" id="admui-siteMenubar">
    <div class="site-menubar-body">
        <div class="tab-content h-full" id="admui-navTabs">
            <div class="tab-pane animation-fade h-full active" id="admui-navTabsItem-2" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">UI 示例</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-laptop" aria-hidden="true"></i>
                            <span class="site-menu-title">布局</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">栅格</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/grids.html">
                                            <span class="site-menu-title">基本栅格</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/layout-grid.html">
                                            <span class="site-menu-title">布局栅格</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">标题栏</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/headers.html">
                                            <span class="site-menu-title">普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/bordered-header.html">
                                            <span class="site-menu-title">带边框</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">侧边栏</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-static.html">
                                            <span class="site-menu-title">左侧普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-fixed.html">
                                            <span class="site-menu-title">左侧浮动</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/right-static.html">
                                            <span class="site-menu-title">右侧普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-fixed.html">
                                            <span class="site-menu-title">右侧浮动</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/boxed.html">
                                    <span class="site-menu-title">盒式布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/two-columns.html">
                                    <span class="site-menu-title">两栏式布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/panel-transition.html">
                                    <span class="site-menu-title">面板动画</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-cube" aria-hidden="true"></i>
                            <span class="site-menu-title">基本</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">面板</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/structure.html">
                                            <span class="site-menu-title">面板结构</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/actions.html">
                                            <span class="site-menu-title">面板操作</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/portlets.html">
                                            <span class="site-menu-title">面板组件</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/buttons.html">
                                    <span class="site-menu-title">按钮</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/icons.html">
                                    <span class="site-menu-title">矢量图标</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/dropdowns.html">
                                    <span class="site-menu-title">下拉菜单</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/list.html">
                                    <span class="site-menu-title">列表组</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/tooltip-popover.html">
                                    <span class="site-menu-title">气泡提示 &amp; 弹出框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/modals.html">
                                    <span class="site-menu-title">模态框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/tabs-accordions.html">
                                    <span class="site-menu-title">选项卡 &amp; 折叠面板</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/images.html">
                                    <span class="site-menu-title">图片</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/badges.html">
                                    <span class="site-menu-title">徽章</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/carousel.html">
                                    <span class="site-menu-title">轮播组件</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/typography.html">
                                    <span class="site-menu-title">排版</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/progress-bars.html">
                                    <span class="site-menu-title">进度条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/colors.html">
                                    <span class="site-menu-title">配色方案</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/utilities.html">
                                    <span class="site-menu-title">辅助类</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-cubes" aria-hidden="true"></i>
                            <span class="site-menu-title">进阶</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/tour.html">
                                    <span class="site-menu-title">新手指引</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/animation.html">
                                    <span class="site-menu-title">动画</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/lightbox.html">
                                    <span class="site-menu-title">灯箱</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/scrollbar.html">
                                    <span class="site-menu-title">滚动条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/rating.html">
                                    <span class="site-menu-title">评分</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/context-menu.html">
                                    <span class="site-menu-title">右键菜单</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/alertify.html">
                                    <span class="site-menu-title">Alertify 弹框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/masonry.html">
                                    <span class="site-menu-title">瀑布流布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">树形控件</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/advanced/tree/jstree.html">
                                            <span class="site-menu-title">JsTree</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/advanced/tree/treeview.html">
                                            <span class="site-menu-title">Treeview</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/toastr.html">
                                    <span class="site-menu-title">Toastr 通知</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/sortable-nestable.html">
                                    <span class="site-menu-title">拖动排序</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">弹层组件</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-plug" aria-hidden="true"></i>
                            <span class="site-menu-title">组件</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/alerts.html">
                                    <span class="site-menu-title">警告框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/ribbon.html">
                                    <span class="site-menu-title">彩带</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/pricing-tables.html">
                                    <span class="site-menu-title">价目表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/overlay.html">
                                    <span class="site-menu-title">遮罩</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/cover.html">
                                    <span class="site-menu-title">覆盖层</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">时间轴</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/structure/timeline/simple.html">
                                            <span class="site-menu-title">简单时间轴</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/structure/timeline/icons.html">
                                            <span class="site-menu-title">图标时间轴</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/step.html">
                                    <span class="site-menu-title">步骤条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/comments.html">
                                    <span class="site-menu-title">评论</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/media.html">
                                    <span class="site-menu-title">媒体</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/chat.html">
                                    <span class="site-menu-title">聊天窗口</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/testimonials.html">
                                    <span class="site-menu-title">客户评价</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/nav.html">
                                    <span class="site-menu-title">导航</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/navbars.html">
                                    <span class="site-menu-title">导航条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/blockquotes.html">
                                    <span class="site-menu-title">引用</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/pagination.html">
                                    <span class="site-menu-title">分页</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/breadcrumbs.html">
                                    <span class="site-menu-title">包屑导航</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-address-card-o" aria-hidden="true"></i>
                            <span class="site-menu-title">卡片</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/statistics.html">
                                    <span class="site-menu-title">统计</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/data.html">
                                    <span class="site-menu-title">数据</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/blog.html">
                                    <span class="site-menu-title">博客</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/chart.html">
                                    <span class="site-menu-title">图表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/social.html">
                                    <span class="site-menu-title">社交</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/weather.html">
                                    <span class="site-menu-title">天气</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-3" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">页面示例</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-home" aria-hidden="true"></i>
                            <span class="site-menu-title">首页示例</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/index-v1.html">
                                    <span class="site-menu-title">首页示例 01</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/index-v2.html">
                                    <span class="site-menu-title">首页示例 02</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/ecommerce.html">
                                    <span class="site-menu-title">电商网站型</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/analytics.html">
                                    <span class="site-menu-title">数据统计型</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/team.html">
                                    <span class="site-menu-title">团队协作型</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-files-o" aria-hidden="true"></i>
                            <span class="site-menu-title">常用页面</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/blank.html">
                                    <span class="site-menu-title">空白页面</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/faq.html">
                                    <span class="site-menu-title">帮助文档</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/gallery-grid.html">
                                    <span class="site-menu-title">相册</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/search-result.html">
                                    <span class="site-menu-title">搜索</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/user.html">
                                    <span class="site-menu-title">客户列表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/email.html">
                                    <span class="site-menu-title">邮件模板</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/code-editor.html">
                                    <span class="site-menu-title">代码编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/error.html">
                                    <span class="site-menu-title">错误页面</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/errors/no-auth.html">
                                    <span class="site-menu-title">没有权限</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/errors/maintenance.html">
                                    <span class="site-menu-title">网站维护中</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/locked.html">
                                    <span class="site-menu-title">锁屏页面</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-group" aria-hidden="true"></i>
                            <span class="site-menu-title">团队协作</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/calendar.html">
                                    <span class="site-menu-title">日历</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/notebook.html">
                                    <span class="site-menu-title">笔记</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/taskboard.html">
                                    <span class="site-menu-title">任务看板</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">知识库</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/articles.html">
                                            <span class="site-menu-title">列表</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/categories.html">
                                            <span class="site-menu-title">分类</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/article.html">
                                            <span class="site-menu-title">详情</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/forum.html">
                                    <span class="site-menu-title">论坛</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/message.html">
                                    <span class="site-menu-title">即时通讯</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/mailbox.html">
                                    <span class="site-menu-title">邮箱</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/media.html">
                                    <span class="site-menu-title">文件管理</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">项目</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/projects.html">
                                            <span class="site-menu-title">项目列表 01</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/work.html">
                                            <span class="site-menu-title">项目列表 02</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-4" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">表格示例</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/tables/basic/index.html">
                            <i class="site-menu-icon fa-table" aria-hidden="true"></i>
                            <span class="site-menu-title">基本表格</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/tables/treegrid/index.html">
                            <i class="site-menu-icon fa-sort-amount-asc" aria-hidden="true"></i>
                            <span class="site-menu-title">树形表格</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">DataTables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/basic-init/zero-configuration.html">
                                    <span class="site-menu-title">基本初始化</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/advanced-init/events-live.html">
                                    <span class="site-menu-title">高级初始化</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/data-sources/dom.html">
                                    <span class="site-menu-title">数据源</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/api/add-row.html">
                                    <span class="site-menu-title">API</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/ajax/simple.html">
                                    <span class="site-menu-title">AJAX</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/server-side/simple.html">
                                    <span class="site-menu-title">服务器模式</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/plug-ins/api.html">
                                    <span class="site-menu-title">插件</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/others/fixed-header.html">
                                    <span class="site-menu-title">其他</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">BootstrapTable</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/options/boolean-options.html">
                                    <span class="site-menu-title">选项</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/methods/getOptions.html">
                                    <span class="site-menu-title">方法</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/extensions/export.html">
                                    <span class="site-menu-title">扩展</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-5" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">表单相关</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/general.html">
                            <i class="site-menu-icon fa-circle-o" aria-hidden="true"></i>
                            <span class="site-menu-title">基本表单</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/material.html">
                            <i class="site-menu-icon fa-google" aria-hidden="true"></i>
                            <span class="site-menu-title">质感风格</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-toggle-off" aria-hidden="true"></i>
                            <span class="site-menu-title">高级表单元素</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/select.html">
                                    <span class="site-menu-title">下拉选择</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/tags-input.html">
                                    <span class="site-menu-title">标签输入</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/date-time.html">
                                    <span class="site-menu-title">日期时间</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/checkbox-radio.html">
                                    <span class="site-menu-title">复选框 &amp; 单选框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/color-icon.html">
                                    <span class="site-menu-title">颜色 &amp; 图标</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/other.html">
                                    <span class="site-menu-title">其他</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/layouts.html">
                            <i class="site-menu-icon fa-indent" aria-hidden="true"></i>
                            <span class="site-menu-title">表单布局</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/wizard.html">
                            <i class="site-menu-icon fa-arrow-right" aria-hidden="true"></i>
                            <span class="site-menu-title">表单向导</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/validation.html">
                            <i class="site-menu-icon fa-check-square-o" aria-hidden="true"></i>
                            <span class="site-menu-title">表单验证</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/masks.html">
                            <i class="site-menu-icon fa-at" aria-hidden="true"></i>
                            <span class="site-menu-title">格式预设</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">编辑器</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/summernote.html">
                                    <span class="site-menu-title">文本编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/markdown.html">
                                    <span class="site-menu-title">Markdown编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/ace.html">
                                    <span class="site-menu-title">代码编辑器</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/image-cropping.html">
                            <i class="site-menu-icon fa-cut" aria-hidden="true"></i>
                            <span class="site-menu-title">图片裁剪</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/dropify.html">
                            <i class="site-menu-icon fa-cloud-upload" aria-hidden="true"></i>
                            <span class="site-menu-title">文件上传</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-6" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">统计图表</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-pie-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">简单图表</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/charts/echarts.html">
                            <i class="site-menu-icon fa-area-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">百度 Echarts</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-7" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">菜单演示 01</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">一级菜单</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/menu.html">
                                    <span class="site-menu-title">二级菜单 01</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/menu.html">
                                    <span class="site-menu-title">二级菜单 02</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">二级菜单 03</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 001</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 002</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 003</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">独立菜单</span>
                        </a>
                    </li>
                    <li class="site-menu-category">菜单演示 02</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">独立菜单</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-8" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">系统信息</li>
                    <li class="site-menu-item">
                        <a href="/html/system/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">菜单管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/organization.html">
                            <i class="site-menu-icon fa-sitemap" aria-hidden="true"></i>
                            <span class="site-menu-title">组织结构</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/role.html">
                            <i class="site-menu-icon fa-sliders" aria-hidden="true"></i>
                            <span class="site-menu-title">角色管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/permission.html">
                            <i class="site-menu-icon fa-user-secret" aria-hidden="true"></i>
                            <span class="site-menu-title">权限管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/log.html">
                            <i class="site-menu-icon fa-file-text-o" aria-hidden="true"></i>
                            <span class="site-menu-title">日志信息</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/blacklist.html">
                            <i class="site-menu-icon fa-shield" aria-hidden="true"></i>
                            <span class="site-menu-title">黑名单</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-gear" aria-hidden="true"></i>
                            <span class="site-menu-title">系统设置</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/system/settings/display.html">
                                    <span class="site-menu-title">显示设置</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/system/settings/log.html">
                                    <span class="site-menu-title">日志设置</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">我的账户</li>
                    <li class="site-menu-item">
                        <a href="/html/system/account.html">
                            <i class="site-menu-icon fa-key" aria-hidden="true"></i>
                            <span class="site-menu-title">账户信息</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<main class="site-page">
    <div class="page-container" id="admui-pageContent">
<div class="page animation-fade">
    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="../icons.html">矢量图标</a>
            </li>
            <li class="breadcrumb-item active">Open Iconic</li>
        </ol>
        <div class="page-header-actions">
            <a class="btn btn-default btn-outline btn-round" href="https://github.com/iconic/open-iconic.git" target="_blank">
                <i class="icon wb-link" aria-hidden="true"></i> 官网</a>
        </div>
    </div>
    <div class="page-content container-fluid">
        <div class="py-30 text-center">
            <h2>图标搜索</h2>
            <form role="search">
                <div class="input-search">
                    <input type="text" class="form-control round" placeholder="搜索图标...">
                    <button type="submit" class="input-search-btn">
                        <i class="icon wb-search" aria-hidden="true"></i>
                    </button>
                </div>
            </form>
            <div class="icon-slider-bar">
                <input id="iconChange" class="icon-slider" type="text" data-plugin="bootstrapSlider" data-slider-min="16"
                    data-slider-max="64" data-slider-step="1" data-slider-value="24" data-slider-tooltip="always">
            </div>
        </div>
        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row">
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="account-login">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-account-login" aria-hidden="true"></i>
                            <div class="icon-title">account-login</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="account-logout">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-account-logout" aria-hidden="true"></i>
                            <div class="icon-title">account-logout</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="action-redo">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-action-redo" aria-hidden="true"></i>
                            <div class="icon-title">action-redo</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="action-undo">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-action-undo" aria-hidden="true"></i>
                            <div class="icon-title">action-undo</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="align-center">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-align-center" aria-hidden="true"></i>
                            <div class="icon-title">align-center</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="align-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-align-left" aria-hidden="true"></i>
                            <div class="icon-title">align-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="align-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-align-right" aria-hidden="true"></i>
                            <div class="icon-title">align-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="aperture">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-aperture" aria-hidden="true"></i>
                            <div class="icon-title">aperture</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-bottom">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-bottom" aria-hidden="true"></i>
                            <div class="icon-title">arrow-bottom</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-circle-bottom">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-circle-bottom" aria-hidden="true"></i>
                            <div class="icon-title">arrow-circle-bottom</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-circle-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-circle-left" aria-hidden="true"></i>
                            <div class="icon-title">arrow-circle-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-circle-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-circle-right" aria-hidden="true"></i>
                            <div class="icon-title">arrow-circle-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-circle-top">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-circle-top" aria-hidden="true"></i>
                            <div class="icon-title">arrow-circle-top</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-left" aria-hidden="true"></i>
                            <div class="icon-title">arrow-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-right" aria-hidden="true"></i>
                            <div class="icon-title">arrow-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-thick-bottom">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-thick-bottom" aria-hidden="true"></i>
                            <div class="icon-title">arrow-thick-bottom</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-thick-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-thick-left" aria-hidden="true"></i>
                            <div class="icon-title">arrow-thick-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-thick-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-thick-right" aria-hidden="true"></i>
                            <div class="icon-title">arrow-thick-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-thick-top">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-thick-top" aria-hidden="true"></i>
                            <div class="icon-title">arrow-thick-top</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="arrow-top">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-arrow-top" aria-hidden="true"></i>
                            <div class="icon-title">arrow-top</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="audio-spectrum">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-audio-spectrum" aria-hidden="true"></i>
                            <div class="icon-title">audio-spectrum</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="audio">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-audio" aria-hidden="true"></i>
                            <div class="icon-title">audio</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="badge">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-badge" aria-hidden="true"></i>
                            <div class="icon-title">badge</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="ban">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-ban" aria-hidden="true"></i>
                            <div class="icon-title">ban</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bar-chart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bar-chart" aria-hidden="true"></i>
                            <div class="icon-title">bar-chart</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="basket">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-basket" aria-hidden="true"></i>
                            <div class="icon-title">basket</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="battery-empty">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-battery-empty" aria-hidden="true"></i>
                            <div class="icon-title">battery-empty</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="battery-full">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-battery-full" aria-hidden="true"></i>
                            <div class="icon-title">battery-full</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="beaker">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-beaker" aria-hidden="true"></i>
                            <div class="icon-title">beaker</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bell">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bell" aria-hidden="true"></i>
                            <div class="icon-title">bell</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bluetooth">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bluetooth" aria-hidden="true"></i>
                            <div class="icon-title">bluetooth</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bold">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bold" aria-hidden="true"></i>
                            <div class="icon-title">bold</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bolt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bolt" aria-hidden="true"></i>
                            <div class="icon-title">bolt</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="book">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-book" aria-hidden="true"></i>
                            <div class="icon-title">book</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bookmark">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bookmark" aria-hidden="true"></i>
                            <div class="icon-title">bookmark</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="box">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-box" aria-hidden="true"></i>
                            <div class="icon-title">box</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="briefcase">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-briefcase" aria-hidden="true"></i>
                            <div class="icon-title">briefcase</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="british-pound">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-british-pound" aria-hidden="true"></i>
                            <div class="icon-title">british-pound</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="browser">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-browser" aria-hidden="true"></i>
                            <div class="icon-title">browser</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="brush">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-brush" aria-hidden="true"></i>
                            <div class="icon-title">brush</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bug">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bug" aria-hidden="true"></i>
                            <div class="icon-title">bug</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="bullhorn">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-bullhorn" aria-hidden="true"></i>
                            <div class="icon-title">bullhorn</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="calculator">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-calculator" aria-hidden="true"></i>
                            <div class="icon-title">calculator</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="calendar">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-calendar" aria-hidden="true"></i>
                            <div class="icon-title">calendar</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="camera-slr">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-camera-slr" aria-hidden="true"></i>
                            <div class="icon-title">camera-slr</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="caret-bottom">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-caret-bottom" aria-hidden="true"></i>
                            <div class="icon-title">caret-bottom</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="caret-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-caret-left" aria-hidden="true"></i>
                            <div class="icon-title">caret-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="caret-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-caret-right" aria-hidden="true"></i>
                            <div class="icon-title">caret-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="caret-top">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-caret-top" aria-hidden="true"></i>
                            <div class="icon-title">caret-top</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-cart" aria-hidden="true"></i>
                            <div class="icon-title">cart</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="chat">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-chat" aria-hidden="true"></i>
                            <div class="icon-title">chat</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="check">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-check" aria-hidden="true"></i>
                            <div class="icon-title">check</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="chevron-bottom">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-chevron-bottom" aria-hidden="true"></i>
                            <div class="icon-title">chevron-bottom</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="chevron-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-chevron-left" aria-hidden="true"></i>
                            <div class="icon-title">chevron-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="chevron-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-chevron-right" aria-hidden="true"></i>
                            <div class="icon-title">chevron-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="chevron-top">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-chevron-top" aria-hidden="true"></i>
                            <div class="icon-title">chevron-top</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="circle-check">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-circle-check" aria-hidden="true"></i>
                            <div class="icon-title">circle-check</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="circle-x">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-circle-x" aria-hidden="true"></i>
                            <div class="icon-title">circle-x</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="clipboard">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-clipboard" aria-hidden="true"></i>
                            <div class="icon-title">clipboard</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="clock">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-clock" aria-hidden="true"></i>
                            <div class="icon-title">clock</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cloud-download">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-cloud-download" aria-hidden="true"></i>
                            <div class="icon-title">cloud-download</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cloud-upload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-cloud-upload" aria-hidden="true"></i>
                            <div class="icon-title">cloud-upload</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cloud">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-cloud" aria-hidden="true"></i>
                            <div class="icon-title">cloud</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cloudy">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-cloudy" aria-hidden="true"></i>
                            <div class="icon-title">cloudy</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="code">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-code" aria-hidden="true"></i>
                            <div class="icon-title">code</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="cog">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-cog" aria-hidden="true"></i>
                            <div class="icon-title">cog</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="collapse-down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-collapse-down" aria-hidden="true"></i>
                            <div class="icon-title">collapse-down</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="collapse-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-collapse-left" aria-hidden="true"></i>
                            <div class="icon-title">collapse-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="collapse-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-collapse-right" aria-hidden="true"></i>
                            <div class="icon-title">collapse-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="collapse-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-collapse-up" aria-hidden="true"></i>
                            <div class="icon-title">collapse-up</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="command">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-command" aria-hidden="true"></i>
                            <div class="icon-title">command</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="comment-square">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-comment-square" aria-hidden="true"></i>
                            <div class="icon-title">comment-square</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="compass">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-compass" aria-hidden="true"></i>
                            <div class="icon-title">compass</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="contrast">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-contrast" aria-hidden="true"></i>
                            <div class="icon-title">contrast</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="copywriting">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-copywriting" aria-hidden="true"></i>
                            <div class="icon-title">copywriting</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="credit-card">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-credit-card" aria-hidden="true"></i>
                            <div class="icon-title">credit-card</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="crop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-crop" aria-hidden="true"></i>
                            <div class="icon-title">crop</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="dashboard">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-dashboard" aria-hidden="true"></i>
                            <div class="icon-title">dashboard</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="data-transfer-download">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-data-transfer-download" aria-hidden="true"></i>
                            <div class="icon-title">data-transfer-download</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="data-transfer-upload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-data-transfer-upload" aria-hidden="true"></i>
                            <div class="icon-title">data-transfer-upload</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="delete">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-delete" aria-hidden="true"></i>
                            <div class="icon-title">delete</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="dial">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-dial" aria-hidden="true"></i>
                            <div class="icon-title">dial</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="document">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-document" aria-hidden="true"></i>
                            <div class="icon-title">document</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="dollar">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-dollar" aria-hidden="true"></i>
                            <div class="icon-title">dollar</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="double-quote-sans-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-double-quote-sans-left" aria-hidden="true"></i>
                            <div class="icon-title">double-quote-sans-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="double-quote-sans-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-double-quote-sans-right" aria-hidden="true"></i>
                            <div class="icon-title">double-quote-sans-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="double-quote-serif-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-double-quote-serif-left" aria-hidden="true"></i>
                            <div class="icon-title">double-quote-serif-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="double-quote-serif-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-double-quote-serif-right" aria-hidden="true"></i>
                            <div class="icon-title">double-quote-serif-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="droplet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-droplet" aria-hidden="true"></i>
                            <div class="icon-title">droplet</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="eject">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-eject" aria-hidden="true"></i>
                            <div class="icon-title">eject</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="elevator">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-elevator" aria-hidden="true"></i>
                            <div class="icon-title">elevator</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="ellipses">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-ellipses" aria-hidden="true"></i>
                            <div class="icon-title">ellipses</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="envelope-closed">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-envelope-closed" aria-hidden="true"></i>
                            <div class="icon-title">envelope-closed</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="envelope-open">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-envelope-open" aria-hidden="true"></i>
                            <div class="icon-title">envelope-open</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="euro">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-euro" aria-hidden="true"></i>
                            <div class="icon-title">euro</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="excerpt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-excerpt" aria-hidden="true"></i>
                            <div class="icon-title">excerpt</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="expand-down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-expand-down" aria-hidden="true"></i>
                            <div class="icon-title">expand-down</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="expand-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-expand-left" aria-hidden="true"></i>
                            <div class="icon-title">expand-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="expand-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-expand-right" aria-hidden="true"></i>
                            <div class="icon-title">expand-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="expand-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-expand-up" aria-hidden="true"></i>
                            <div class="icon-title">expand-up</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="external-link">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-external-link" aria-hidden="true"></i>
                            <div class="icon-title">external-link</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="eye">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-eye" aria-hidden="true"></i>
                            <div class="icon-title">eye</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="eyedropper">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-eyedropper" aria-hidden="true"></i>
                            <div class="icon-title">eyedropper</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="file">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-file" aria-hidden="true"></i>
                            <div class="icon-title">file</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="fire">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-fire" aria-hidden="true"></i>
                            <div class="icon-title">fire</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="flag">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-flag" aria-hidden="true"></i>
                            <div class="icon-title">flag</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="flash">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-flash" aria-hidden="true"></i>
                            <div class="icon-title">flash</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="folder">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-folder" aria-hidden="true"></i>
                            <div class="icon-title">folder</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="fork">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-fork" aria-hidden="true"></i>
                            <div class="icon-title">fork</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="fullscreen-enter">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-fullscreen-enter" aria-hidden="true"></i>
                            <div class="icon-title">fullscreen-enter</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="fullscreen-exit">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-fullscreen-exit" aria-hidden="true"></i>
                            <div class="icon-title">fullscreen-exit</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="globe">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-globe" aria-hidden="true"></i>
                            <div class="icon-title">globe</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="graph">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-graph" aria-hidden="true"></i>
                            <div class="icon-title">graph</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="grid-four-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-grid-four-up" aria-hidden="true"></i>
                            <div class="icon-title">grid-four-up</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="grid-three-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-grid-three-up" aria-hidden="true"></i>
                            <div class="icon-title">grid-three-up</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="grid-two-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-grid-two-up" aria-hidden="true"></i>
                            <div class="icon-title">grid-two-up</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="hard-drive">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-hard-drive" aria-hidden="true"></i>
                            <div class="icon-title">hard-drive</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="header">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-header" aria-hidden="true"></i>
                            <div class="icon-title">header</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="headphones">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-headphones" aria-hidden="true"></i>
                            <div class="icon-title">headphones</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="heart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-heart" aria-hidden="true"></i>
                            <div class="icon-title">heart</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="home">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-home" aria-hidden="true"></i>
                            <div class="icon-title">home</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="image">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-image" aria-hidden="true"></i>
                            <div class="icon-title">image</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="inbox">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-inbox" aria-hidden="true"></i>
                            <div class="icon-title">inbox</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="infinity">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-infinity" aria-hidden="true"></i>
                            <div class="icon-title">infinity</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="info">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-info" aria-hidden="true"></i>
                            <div class="icon-title">info</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="italic">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-italic" aria-hidden="true"></i>
                            <div class="icon-title">italic</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="justify-center">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-justify-center" aria-hidden="true"></i>
                            <div class="icon-title">justify-center</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="justify-left">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-justify-left" aria-hidden="true"></i>
                            <div class="icon-title">justify-left</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="justify-right">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-justify-right" aria-hidden="true"></i>
                            <div class="icon-title">justify-right</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="key">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-key" aria-hidden="true"></i>
                            <div class="icon-title">key</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="laptop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-laptop" aria-hidden="true"></i>
                            <div class="icon-title">laptop</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="layers">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-layers" aria-hidden="true"></i>
                            <div class="icon-title">layers</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="lightbulb">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-lightbulb" aria-hidden="true"></i>
                            <div class="icon-title">lightbulb</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="link-broken">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-link-broken" aria-hidden="true"></i>
                            <div class="icon-title">link-broken</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="link-intact">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-link-intact" aria-hidden="true"></i>
                            <div class="icon-title">link-intact</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="list-rich">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-list-rich" aria-hidden="true"></i>
                            <div class="icon-title">list-rich</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="list">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-list" aria-hidden="true"></i>
                            <div class="icon-title">list</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="location">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-location" aria-hidden="true"></i>
                            <div class="icon-title">location</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="lock-locked">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-lock-locked" aria-hidden="true"></i>
                            <div class="icon-title">lock-locked</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="lock-unlocked">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-lock-unlocked" aria-hidden="true"></i>
                            <div class="icon-title">lock-unlocked</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="loop-circular">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-loop-circular" aria-hidden="true"></i>
                            <div class="icon-title">loop-circular</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="loop-square">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-loop-square" aria-hidden="true"></i>
                            <div class="icon-title">loop-square</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="loop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-loop" aria-hidden="true"></i>
                            <div class="icon-title">loop</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="magnifying-glass">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-magnifying-glass" aria-hidden="true"></i>
                            <div class="icon-title">magnifying-glass</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="map-marker">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-map-marker" aria-hidden="true"></i>
                            <div class="icon-title">map-marker</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="map">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-map" aria-hidden="true"></i>
                            <div class="icon-title">map</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-pause">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-pause" aria-hidden="true"></i>
                            <div class="icon-title">media-pause</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-play">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-play" aria-hidden="true"></i>
                            <div class="icon-title">media-play</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-record">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-record" aria-hidden="true"></i>
                            <div class="icon-title">media-record</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-skip-backward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-skip-backward" aria-hidden="true"></i>
                            <div class="icon-title">media-skip-backward</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-skip-forward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-skip-forward" aria-hidden="true"></i>
                            <div class="icon-title">media-skip-forward</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-step-backward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-step-backward" aria-hidden="true"></i>
                            <div class="icon-title">media-step-backward</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-step-forward">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-step-forward" aria-hidden="true"></i>
                            <div class="icon-title">media-step-forward</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="media-stop">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-media-stop" aria-hidden="true"></i>
                            <div class="icon-title">media-stop</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="medical-cross">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-medical-cross" aria-hidden="true"></i>
                            <div class="icon-title">medical-cross</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="menu">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-menu" aria-hidden="true"></i>
                            <div class="icon-title">menu</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="microphone">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-microphone" aria-hidden="true"></i>
                            <div class="icon-title">microphone</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="minus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-minus" aria-hidden="true"></i>
                            <div class="icon-title">minus</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="monitor">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-monitor" aria-hidden="true"></i>
                            <div class="icon-title">monitor</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="moon">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-moon" aria-hidden="true"></i>
                            <div class="icon-title">moon</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="move">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-move" aria-hidden="true"></i>
                            <div class="icon-title">move</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="musical-note">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-musical-note" aria-hidden="true"></i>
                            <div class="icon-title">musical-note</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="paperclip">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-paperclip" aria-hidden="true"></i>
                            <div class="icon-title">paperclip</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pencil">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-pencil" aria-hidden="true"></i>
                            <div class="icon-title">pencil</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="people">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-people" aria-hidden="true"></i>
                            <div class="icon-title">people</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="person">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-person" aria-hidden="true"></i>
                            <div class="icon-title">person</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="phone">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-phone" aria-hidden="true"></i>
                            <div class="icon-title">phone</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pie-chart">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-pie-chart" aria-hidden="true"></i>
                            <div class="icon-title">pie-chart</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pin">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-pin" aria-hidden="true"></i>
                            <div class="icon-title">pin</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="play-circle">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-play-circle" aria-hidden="true"></i>
                            <div class="icon-title">play-circle</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="plus">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-plus" aria-hidden="true"></i>
                            <div class="icon-title">plus</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="power-standby">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-power-standby" aria-hidden="true"></i>
                            <div class="icon-title">power-standby</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="print">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-print" aria-hidden="true"></i>
                            <div class="icon-title">print</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="project">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-project" aria-hidden="true"></i>
                            <div class="icon-title">project</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="pulse">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-pulse" aria-hidden="true"></i>
                            <div class="icon-title">pulse</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="puzzle-piece">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-puzzle-piece" aria-hidden="true"></i>
                            <div class="icon-title">puzzle-piece</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="question-mark">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-question-mark" aria-hidden="true"></i>
                            <div class="icon-title">question-mark</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="rain">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-rain" aria-hidden="true"></i>
                            <div class="icon-title">rain</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="random">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-random" aria-hidden="true"></i>
                            <div class="icon-title">random</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="reload">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-reload" aria-hidden="true"></i>
                            <div class="icon-title">reload</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="resize-both">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-resize-both" aria-hidden="true"></i>
                            <div class="icon-title">resize-both</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="resize-height">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-resize-height" aria-hidden="true"></i>
                            <div class="icon-title">resize-height</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="resize-width">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-resize-width" aria-hidden="true"></i>
                            <div class="icon-title">resize-width</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="rss-alt">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-rss-alt" aria-hidden="true"></i>
                            <div class="icon-title">rss-alt</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="rss">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-rss" aria-hidden="true"></i>
                            <div class="icon-title">rss</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="script">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-script" aria-hidden="true"></i>
                            <div class="icon-title">script</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="share-boxed">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-share-boxed" aria-hidden="true"></i>
                            <div class="icon-title">share-boxed</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="share">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-share" aria-hidden="true"></i>
                            <div class="icon-title">share</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="shield">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-shield" aria-hidden="true"></i>
                            <div class="icon-title">shield</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="signal">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-signal" aria-hidden="true"></i>
                            <div class="icon-title">signal</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="signpost">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-signpost" aria-hidden="true"></i>
                            <div class="icon-title">signpost</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="sort-ascending">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-sort-ascending" aria-hidden="true"></i>
                            <div class="icon-title">sort-ascending</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="sort-descending">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-sort-descending" aria-hidden="true"></i>
                            <div class="icon-title">sort-descending</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="spreadsheet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-spreadsheet" aria-hidden="true"></i>
                            <div class="icon-title">spreadsheet</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="star">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-star" aria-hidden="true"></i>
                            <div class="icon-title">star</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="sun">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-sun" aria-hidden="true"></i>
                            <div class="icon-title">sun</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="tablet">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-tablet" aria-hidden="true"></i>
                            <div class="icon-title">tablet</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="tag">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-tag" aria-hidden="true"></i>
                            <div class="icon-title">tag</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="tags">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-tags" aria-hidden="true"></i>
                            <div class="icon-title">tags</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="target">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-target" aria-hidden="true"></i>
                            <div class="icon-title">target</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="task">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-task" aria-hidden="true"></i>
                            <div class="icon-title">task</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="terminal">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-terminal" aria-hidden="true"></i>
                            <div class="icon-title">terminal</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="text">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-text" aria-hidden="true"></i>
                            <div class="icon-title">text</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="thumb-down">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-thumb-down" aria-hidden="true"></i>
                            <div class="icon-title">thumb-down</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="thumb-up">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-thumb-up" aria-hidden="true"></i>
                            <div class="icon-title">thumb-up</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="timer">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-timer" aria-hidden="true"></i>
                            <div class="icon-title">timer</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="transfer">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-transfer" aria-hidden="true"></i>
                            <div class="icon-title">transfer</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="trash">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-trash" aria-hidden="true"></i>
                            <div class="icon-title">trash</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="underline">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-underline" aria-hidden="true"></i>
                            <div class="icon-title">underline</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="vertical-align-bottom">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-vertical-align-bottom" aria-hidden="true"></i>
                            <div class="icon-title">vertical-align-bottom</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="vertical-align-center">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-vertical-align-center" aria-hidden="true"></i>
                            <div class="icon-title">vertical-align-center</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="vertical-align-top">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-vertical-align-top" aria-hidden="true"></i>
                            <div class="icon-title">vertical-align-top</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="video">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-video" aria-hidden="true"></i>
                            <div class="icon-title">video</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="volume-high">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-volume-high" aria-hidden="true"></i>
                            <div class="icon-title">volume-high</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="volume-low">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-volume-low" aria-hidden="true"></i>
                            <div class="icon-title">volume-low</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="volume-off">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-volume-off" aria-hidden="true"></i>
                            <div class="icon-title">volume-off</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="warning">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-warning" aria-hidden="true"></i>
                            <div class="icon-title">warning</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="wifi">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-wifi" aria-hidden="true"></i>
                            <div class="icon-title">wifi</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="wrench">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-wrench" aria-hidden="true"></i>
                            <div class="icon-title">wrench</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="x">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-x" aria-hidden="true"></i>
                            <div class="icon-title">x</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="yen">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-yen" aria-hidden="true"></i>
                            <div class="icon-title">yen</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="zoom-in">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-zoom-in" aria-hidden="true"></i>
                            <div class="icon-title">zoom-in</div>
                        </div>
                    </div>
                    <div class="col-xl-1 col-lg-2 col-md-3 col-4 icondemo-wrap vertical-align" data-name="zoom-out">
                        <div class="icondemo vertical-align-middle">
                            <i class="icon io-zoom-out" aria-hidden="true"></i>
                            <div class="icon-title">zoom-out</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</main>

<footer class="site-footer">
    <div class="site-footer-legal">上海畅控 &copy;
        <a href="http://www.admui.com" target="_blank">admui.com</a>
    </div>
    <div class="site-footer-right">
        当前版本：v2.1.0 (更新于2019-4-11)
        <a class="ml-5" data-toggle="tooltip" title="购买或升级" href="http://www.admui.com/buy" target="_blank">
            <i class="icon fa-cloud-upload"></i>
        </a>
    </div>
</footer>
<!-- 插件 -->
<script src="../../../../../public/themes/global/js/plugins/responsive-tabs.js"></script>
<script src="../../../../../public/vendor/artTemplate/template-web.js"></script>
<script src="../../../../../public/vendor/toastr/toastr.min.js"></script>
<script src="../../../../../public/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../../../../public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../../../../public/vendor/screenfull/screenfull.min.js"></script>
<script src="../../../../../public/vendor/bootbox/bootbox.min.js"></script>
<script src="../../../../../public/vendor/bootstrap-slider/bootstrap-slider.min.js"></script>

<!-- 消息通知 -->
<script src="../../../../../public/js/notify-msg.js"></script>

<!-- Page JS -->
<script src="../../../../../public/js/examples/components/basic/icon.js"></script>
</body>
</html>